<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>处理课题</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{/js/jquery.min.js}"></script>
    <!--<script th:src="@{/js/bootstrap.min.js}"></script>-->
    <link rel="stylesheet" th:href="@{/layer/css/layui.css}"  media="all"/>
    <link rel="stylesheet" th:href="@{/css/topicList.css}"/>
    <style>
        .list-item{
            overflow: auto;
            height: 60px;
            word-wrap:break-word;
        }
        .item-select{
            margin-left: 25%;
        }
        .item-reject{
            margin-left: 120px;
        }
    </style>
</head>
<body>
<!--列表，展示所有发布的课题，然后点击可以看到每个课题里面具体的学生的交流情况-->
<th:block th:if="${#lists.size(topicList) == 0}" >
    <div style="font-size: 18px; margin: 100px 0 0 20%;">
        没有保存的课题，请到发布页面进行编辑发布<br/>
        <a href="PublishTopic.html"><button class="btn btn-primary">点击前往</button></a>
    </div>
</th:block>
<div th:each="topic:${topicList}">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title" th:inline="text">[[${topic.name}]] <span class="selectNum" th:data="${topic.topicId}"></span> </h2>
            <div class="layui-colla-content">
                <button class="btn btn-primary">提交审核</button>
                <a th:href="@{/teacher/editTopic/{topic} (topic=${topic.topicId})}"><button class="btn btn-primary">修改课题</button></a>
                <button class="btn btn-primary" th:onclick="'javascript:listSelect(\''+${topic.topicId}+'\');'">查看学生申请列表</button>
                <button class="btn btn-danger transStudent" th:data="${topic.topicId}">取消该已选学生</button>
                <button class="btn btn-danger" th:onclick="'javascript:deleteTopic(\''+${topic.topicId}+'\');'">删除课题</button>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/layer/layui.js}" charset="utf-8"></script>
<script>
    function deleteTopic(topicId) {
        layer.confirm('确实要删除课题吗？', {
            btn: ['取消', '确认'] //可以无限个按钮
            ,btn2: function(index, layero){
                $.get('/myth/teacher/del/topic/'+topicId, function (data) {
                    // console.log(data)
                    window.location.reload(true)
                });return 0
            }
        }, function(index){
            return 0
        });
    }
    $(".transStudent").on('click', function () {
        var id = $(this).attr('data')
        console.log(id)
        layer.confirm('确实要取消该学生的选题资格吗？', {
            btn: ['取消', '确认'] //可以无限个按钮
            ,btn2: function(index, layero){
                $.get('/myth/teacher/resetStudent/'+id, function (data) {
                    window.location.reload(true)
                });return 0
            }
        }, function(index){
            return 0
        });
    })
    // 获取该课题的选题人数数量
    function getNum(spanNum){
        $.get('/myth/teacher/SelectNum/'+spanNum.attr('data'), function (data) {
            if(data == 0){
                spanNum.html('')
                spanNum.attr('class','')
            }else{
                spanNum.html(data)
                spanNum.attr('class','layui-badge')
            }
        })
    }
    var idList = $(".selectNum");
    /*<![CDATA[*/
    for(var i=0; i<idList.length;i++){
        getNum($(idList[i]))
    }
    /*]]>*/

    layui.use(['element', 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;
    });
    function selectStudent(studentId, topicId, type) {
        layer.prompt({
            formType: 2,
            title: '有什么要回复的吗？',
            area: ['400px', '300px'] //自定义文本域宽高
        }, function(value, index, elem){
            url = '/myth/teacher/selectStudent/'+studentId+'/'+topicId+'?comment='+value;
            if(type===0){
                url='/myth/teacher/rejectStudent/'+studentId+'/'+topicId+'?comment='+value;
            }
            $.get(url, function (data) {
                // console.log(data)
                switch(data){
                    case 'success':
                        layer.msg('回复成功');
                        break;
                    case 'fail':
                        layer.msg('回复失败,请刷新重试');
                        break;
                }
            })
            layer.close(index);
            layer.closeAll();

        });
    }
    function deleteTopic(topicId) {
        layer.confirm('确实要删除课题吗？', {
            btn: ['取消', '确认'] //可以无限个按钮
            ,btn2: function(index, layero){
                $.get('/myth/teacher/del/topic/'+topicId, function (data) {
                    // console.log(data)
                    window.location.reload(true)
                });return 0
            }
        }, function(index){
            return 0
        });
    }
    function listSelect(topicId) {
        $.get('/myth/teacher/ListSelectTopic/'+topicId, function (data) {
            // console.log(data== '')
            if(data === ''){
                layer.msg('您已经确定好了学生 或者 暂时没有学生选该课题');
                return 0
            }
            // console.log(data.length)
            if(data.length == 0){
                layer.msg('暂时没有学生选该课题');
                return 0
            }
            tableData = ''
            data.forEach(function (value) {
                // console.log(value)
                status = ''
                btnStatus = ' disabled="disabled" '
                if(value.reply=='1'){
                    status = '  <span class="layui-badge layui-bg-green">已通过申请</span>'
                }else if(value.reply=='0' || value.reply=='2'){
                    status = '  <span class="layui-badge ">已拒绝申请</span>'
                }else{
                    status = '  <span class="layui-badge layui-bg-blue">待处理</span>'
                    btnStatus = ' '
                }
                /*<![CDATA[*/
                console.log(btnStatus)
                tableData +=  '<div class="layui-collapse">' +
                    '<div class="layui-colla-item">' +
                    '    <h2 class="layui-colla-title">' + value.studentId.name+' | '+value.studentId.classId.majorId.name+' | '+value.studentId.classId.name +
                    ''+status+'</h2>' +
                    '    <div class="layui-colla-content">' +
                    '          <div class="list-item">' + value.comment + '</div><br/>' +
                    '          <button '+btnStatus+' class="btn btn-primary item-select " onclick="selectStudent('+value.studentId.studentId+','+value.topicId.topicId+', 1)"  >选择学生</button>' +
                    '          <button '+btnStatus+' class="btn btn-danger item-reject " onclick="selectStudent('+value.studentId.studentId+','+value.topicId.topicId+', 0)"  >拒绝学生</button>' +
                    '    </div>' +
                    '  </div>' +
                    '</div>'
                /*]]>*/
            })
            layer.open({
                type: 1,
                area: ['700px', '500px'],
                resize: false,
                title: '请选择完成课题的学生',
                content: tableData
            })
            layui.use(['element', 'layer'], function(){
                var element = layui.element;
                element.init();
            });
        })
    }
</script>
</body>
</html>